<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black; text-align:center;}
    #c1 {background:white;}
    </style>
    <script>
    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');

      let pause=false;
      let i=0;
      let x=100;
      let frameCounter=0;

      let oImg=new Image();
      oImg.src='fish1.png';
      oImg.onload=function (){
        requestAnimationFrame(next);
        function next(){
          if(!pause){
            gd.clearRect(0, 0, oC.width, oC.height);

            if(frameCounter%4==0){
              i++;
              if(i==4)i=0;
            }

            x+=1.5;

            gd.drawImage(
              oImg,
              //sx, sy, sw, sh
              0, i*37, 55, 37,
              //dx, dy, dw, dh
              x, 100, 55, 37
            );

            frameCounter++;
          }

          requestAnimationFrame(next);
        }
      };

      document.onclick=function (){
        pause=!pause;
      };
    };
    </script>
  </head>
  <body>
    <canvas id="c1" width="800" height="600"></canvas>
  </body>
</html>
